<template>
  <view class="ve-text">
    <text class="ve-text__value" :style="[valueStyle]" :class="[lines && `ve-line-${lines}`]">{{ text || defaultText }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      // 显示的值
      text: [String, Number],
      // 是否块状
      block: {
        type: Boolean,
        default: false,
      },
      // 文本显示的行数，如果设置，超出此行数，将会显示省略号
      lines: {
        type: [String, Number],
        default: 2,
      },
      customStyle: {
        type: Object,
        default: () => {},
      },
      defaultText: {
        type: [String, Number],
        default: '-',
      }
    },
    emits: ['click'],
    computed: {
      valueStyle() {
        const style = {}
        this.isNvue && this.lines && (style.lines = this.lines)
        return {
          ...style,
          ...this.customStyle,
        }
      },
      isNvue() {
        let nvue = false
        // #ifdef APP-NVUE
        nvue = true
        // #endif
        return nvue
      },
    },
  }
</script>

<style lang="scss" scoped>
  // scss混入，为了少写几行#ifndef
  @mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
  }
  .ve-text {
    @include flex(row);
    align-items: center;
    flex-wrap: nowrap;
    flex: 1;
    /* #ifndef APP-NVUE */
    width: 100%;
    /* #endif */

    &__value {
      font-size: 24rpx;
      @include flex;
      color: #191c27ff;
      flex-wrap: wrap;
      text-overflow: ellipsis;
      align-items: center;
    }
  }
  @for $i from 1 through 5 {
    .ve-line-#{$i} {
      /* #ifdef APP-NVUE */
      // nvue下，可以直接使用lines属性，这是weex特有样式
      lines: $i;
      text-overflow: ellipsis;
      overflow: hidden;
      flex: 1;
      /* #endif */

      /* #ifndef APP-NVUE */
      // vue下，单行和多行显示省略号需要单独处理
      @if $i == '1' {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      } @else {
        display: -webkit-box !important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: $i;
        -webkit-box-orient: vertical !important;
      }
      /* #endif */
    }
  }
</style>
